<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="绘图配置" name="first">
            <div class="text-14">选择平台</div>
            <el-select v-model="platform" class="margin-top-sm margin-bottom-sm" placeholder="请选择平台"
                       @change="getSettingList">
                <el-option label="SD" value="sd"/>
                <el-option label="MJ" value="mj"/>
            </el-select>
            <template v-if="platform==='sd'">
                <blockquote v-for="(item,index) in settingSD" :key="index">
                    <div class="text-14">{{ item['name'] }}</div>
                    <template v-if="item['type']===1">
                        <el-select v-model="item['isSelected']" :placeholder="'请选择'+item['name']"
                                   class="margin-top-sm margin-bottom-sm">
                            <el-option v-for="items in item['setting']" :key="items['id']" :label="items['display']"
                                       :value="items['id']"/>
                        </el-select>
                    </template>
                    <template v-if="item['type']===2">
                        <div class="classify-list flex align-center margin-top-sm margin-bottom-sm">
                            <div v-for="(items,indexs) in item['setting']" :key="indexs"
                                 :class="items.isSelected?'active':''"
                                 class="items flex align-center justify-center margin-right-sm text-14"
                                 @click="SDSelected(index,indexs,'sd')">
                                {{ items.display }}
                            </div>
                        </div>
                    </template>
                    <template v-if="item.type===3">
                        <div class="slider-demo-block padding-left-xs margin-top-sm margin-bottom-sm">
                            <el-slider v-model="item.values" :max="Number(item.setting[0].max)"
                                       :min="Number(item.setting[0].min)" :show-input-controls="false"
                                       :step="item.setting[0].step" show-input/>
                        </div>
                    </template>
                </blockquote>
            </template>
            <template v-else-if="platform==='mj'">
                <blockquote v-for="(item,index) in settingMJ" :key="index">
                    <div class="text-14">{{ item['name'] }}</div>
                    <div class="classify-list flex align-center margin-top-sm margin-bottom-sm">
                        <div v-for="(items,indexs) in item['setting']" :key="indexs"
                             :class="items.isSelected?'active':''"
                             class="items flex align-center justify-center margin-right-sm text-14"
                             @click="SDSelected(index,indexs,'mj')">
                            {{ items.value }}
                        </div>
                    </div>
                </blockquote>
            </template>
        </el-tab-pane>
        <el-tab-pane label="提示词" name="second">
            <div v-for="(item,index) in promptCategoryList" class="margin-bottom-sm">
                <div>{{ item.name }}</div>
                <div class="classify-list flex align-center margin-top-sm">
                    <div v-for="(secondItem,secondIndex) in item.prompt" :key="secondIndex"
                         :class="secondItem.isSelected?'active':''"
                         class="items flex align-center justify-center margin-right-sm"
                         @click="handleSelected(index,secondIndex)">
                        {{ secondItem.name }}
                    </div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>

</template>

<script lang="ts" setup>
    import {drawSetting, promptCategory} from "../http/draw";
    import {reactive, ref, defineExpose, onMounted} from "vue";
    import type {TabsPaneContext} from 'element-plus'

    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
    }

    //选择的平台
    const platform = ref('mj')

    //MJ配置对应参数
    const settingMJ = ref([])

    //SD配置参数
    const settingSD = ref([])

    //提示词对应参数
    const promptCategoryList = ref([])

    onMounted(() => {
        console.log("drawSetting")
        getSettingList()
    })

    //绘画配置
    const getSettingList = () => {
        drawSetting({'key': platform.value}).then(res => {
            const {data} = res;
            console.log("drawSetting", data)
            if (data.setting_sd) {
                let _setting_sd = data.setting_sd
                _setting_sd.map((item, index) => {
                    if (item.type === 1) {
                        item.isSelected = ''
                    } else if (item.type === 2) {
                        item.setting.map((items, indexs) => {
                            items.isSelected = indexs == 0;
                        })
                    } else {
                        item.values = Number(item.setting[0].default)
                    }
                })
                settingSD.value = _setting_sd
            } else if (data.setting_mj) {
                let _setting_mj = data.setting_mj
                _setting_mj.map((item, index) => {
                    item.setting.map((items, indexs) => {
                        items.isSelected = indexs == 0;
                    })
                })
                settingMJ.value = _setting_mj

            }
        })
    }

    //提示词分类
    promptCategory().then(res => {
        const {data} = res;
        let prompt_category = data.prompt_category
        prompt_category.map(item => {
            let prompt = item.prompt
            prompt.map(items => {
                items.isSelected = false
            })
        })
        promptCategoryList.value = prompt_category
        console.log("promptCategory", promptCategoryList.value)
    })

    const handleFirst = (index, classify) => {
        console.log("index", index, classify);
        classify.map(item => {
            item.isSelected = false;
        })
        classify[index].isSelected = !classify[index].isSelected
    }

    const SDSelected = (parentIndex, secondIndex, typeValue) => {
        console.log("parentIndex", parentIndex, secondIndex)
        if (typeValue === 'sd') {
            settingSD.value[parentIndex].setting.map(item => {
                item.isSelected = false;
            })
            settingSD.value[parentIndex].setting[secondIndex].isSelected = !settingSD.value[parentIndex].setting[secondIndex].isSelected
        } else if (typeValue === 'mj') {
            settingMJ.value[parentIndex].setting.map(item => {
                item.isSelected = false;
            })
            settingMJ.value[parentIndex].setting[secondIndex].isSelected = !settingMJ.value[parentIndex].setting[secondIndex].isSelected
        }
    }

    const handleSelected = (parentIndex, secondIndex) => {
        console.log("parentIndex", parentIndex, secondIndex, promptCategoryList.value[parentIndex].prompt[secondIndex])
        promptCategoryList.value[parentIndex].prompt[secondIndex].isSelected = !promptCategoryList.value[parentIndex].prompt[secondIndex].isSelected
    }

    defineExpose({
        platform,
        settingMJ,
        settingSD,
        promptCategoryList
    })
</script>

<style>
    .el-slider__input {
        width: 60px !important;
    }
</style>

<style lang="scss" scoped>
  @import "@/assets/css/variables.scss";

  .classify-list {
    .items {
      cursor: pointer;
      border: $Secondary2 1px solid;
      color: $Secondary2;
      border-radius: 2px;
      padding: 5px 16px;

      &.active {
        border: $Secondary4 1px solid;
        color: $Secondary4
      }
    }
  }

  .demo-tabs {
    ::v-deep .el-tabs__item {
      color: #fff;
    }

    ::v-deep .el-tabs__item.is-active {
      color: #409eff
    }
  }

</style>
